<script setup lang='ts'>
  import { reactive, ref } from 'vue';
  import request from '@/api/index'
  import { getAssetsFile, xmloading } from '@/utils/public';
  import xmimg from '@/components/xmimg.vue';
  import { stakeMaxList } from '@/pinia/getter';
  import xmdialog from '@/components/xmdialog.vue';
  const action = reactive({
    show:false,
    list:[] as Array<any>
  })
  let page = 0;
  const loadingSet = ref(false); // 是否处于加载状态
  const loadSet = ref(true); // 是否已加载完成 不再触发 load 事件
  const openDialog = async()=>{
    page = 0
    action.list = []
    await getList()
    action.show = true
  }
  const listload = ()=> {
    if(loadSet.value || action.list.length == 0) return
    page += 1
    getList();
  };
  const getList = async()=>{
    const loading = xmloading()
    const res = await request.stakeUserList({
      page:page,
      limit:50
    })
    loading.close()
    const { data=[] } = res || {}
    // 列表返回空 禁止触底事件
    if(data.length == 0) {
      loadSet.value = true
      return
    }
    loadSet.value = false
    loadingSet.value = false
    action.list = [...action.list, ...data]
  }
</script>

<template>
  <div class="userListBox">
    <div class="userList flex-align">
      <div v-for="item in stakeMaxList" class="portrait">
        <xmimg :src="item.image" oss />
      </div>
      <img @click="openDialog" :src="getAssetsFile('icon6.png')" class="iconBut">
    </div>
    <xmdialog class="newDialogBack" :close-show="2" v-model:dialogshow="action.show">
      <template v-slot:titleImg>
        <img :src="getAssetsFile('titleimg3.png')">
      </template>
        <van-list
        class="borderColor"
        :offset="50"
        v-model:loading="loadingSet"
        :finished="loadSet"
        @load="listload">
      <div class="list">
          <div v-for="item in action.list" class="portrait">
            <xmimg :src="item.image" oss />
          </div>
        </div>
        </van-list>
    </xmdialog>
  </div>
</template>

<style lang='scss' scoped>
  .userListBox {
    margin: 0 0 0 auto;
    .portrait {
      position: relative;
      overflow: hidden;
      background: #D8D8D8;
      border-radius: 100%;
      border: 1px solid #fff;
      box-sizing: border-box;
      img {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
        height: 100%;
      }
    }
  }
  .userList {
    .portrait {
      width: 20px;
      height: 20px;
      margin-right: 5px;
    }
    .iconBut {
      width: 14px;
      height: 14px;
    }
  }
  .newDialogBack {
    .borderColor {
      padding: 16px 11px;
    }
    .list {
      display: grid;
      grid-template-columns: repeat(6 , 40px);
      grid-gap: 16px 9px;
      .portrait {
        width: 40px;
        height: 40px;
      }
    }
  }
</style> 